<template>

    <div class="innerpage headspace">
        <Header active="1"></Header>
        <div class="bread">
			
			<div class="page-inner">
			    <NuxtLink to="/">Home</NuxtLink>><NuxtLink to="/Manufacturers">Database</NuxtLink>><NuxtLink to="/APIs">Active Pharmaceutical
			        Ingredient (API)</NuxtLink>><NuxtLink  :to="'/APIs/'+dataInfo.id" style="cursor: pointer">{{dataInfo.ingredient}}</NuxtLink>><span>Study-specified  PDE</span>
			</div>
            
        </div>
        <div class="detailBox" id="p1">
            <div class="box flex page-inner">
                <div class="col">
                    <div class="mliks">
                        <div class="mt f24 font-m">Study-specified  PDE</div>
                        <div class="items">
                            <div class="i" :class="selectedType==idx?'cur':''" v-for="(i,idx) in types" @click="selectedType=idx,initData()"><a href="javascript:;">{{ i.name }}</a></div>
                        </div>
                    </div>
                </div>
                <div class="cor">
                    <div class="dt f24 font-m">Study-specified  PDE</div>
                    <div class="dt2 f24 font-m">Calculated PDE based on Clinical Data</div>
                    <div class="PDEList f16">
                        <el-table :data="dataList" style="width: 100%">
                            <el-table-column prop="StudylD" label="StudylD">
                                <template #default="scope">
                                    <div class="vm" @click="showDetail(scope.row)">
                                        <span>{{ scope.row.study_id }}</span>
                                        <span class="ico">+</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="Country" label="Country">
                                <template #default="scope">{{ scope.row.country }}</template>
                            </el-table-column>
                            <el-table-column prop="CriticalEffect" label="Critical Effect">
                                <template #default="scope">{{ scope.row.critical_effect }}</template>
                            </el-table-column>
                            <el-table-column prop="Routes" label="Routes">
                                <template #default="scope"><span class="blue">{{ scope.row.routes }}</span></template>
                            </el-table-column>
                            <el-table-column prop="Species" label="Species">
                                <template #default="scope">{{ scope.row.species }}</template>
                            </el-table-column>
                            <el-table-column prop="PoD" label="PoD (mg/kg/day) ">
                                <template #default="scope">{{ scope.row.pod }}</template>
                            </el-table-column>
                            <el-table-column prop="PDE" label="PDE (mg/day) ">
                                <template #default="scope">{{ scope.row.pde }}</template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <Pagination :total="total" @change="pageChange" :nobg="true" :count="3" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ElMessageBox } from 'element-plus'
	import {
		study_specified_pde,study_specified_pde_list,apiInfo
	} from '@/api/sections'
export default {
    async setup() {
        const route = useRoute();
        const info = {};
        const state = useState('global_userInfo');
        return { info, state }
    },
    data() {
        return {
            types:[
                {
                    name:"Clinical"
                },
                {
                    name:"Non-clinical"
                }
            ],
			dataInfo:{},
            selectedType:0,
            limit:10,
            page:1,
            total:20,
            dataList:[]
        }
    },
    methods: {
		toBack(){
			window.history.back(); 
		},
			pageChange(e){
				this.page=e
				this.getData();
                this.$nextTick(function(){
                    window.scrollTo(0,0);
                })
			},
			initData(){
				this.page=1
				this.getData()
			},
			getData(){
				let post={
					page:this.page,
					pagesize:10,
					category:this.types[this.selectedType].name,
					apiid: this.$route.query.id,
				}
				study_specified_pde(post).then((res)=>{
					console.log(res,1111)
					  this.dataList=res.data.data
					  this.total=res.data.totalcount
				})
			},
        showDetail:function(obj){
			
			study_specified_pde_list({apiid: obj.api_id,study_specified_pde_id:obj.study_id}).then((res)=>{
				let ele=''
				res.data.some(item=>{
					ele+=`<tr> <td>${item.factors}</td> <td>${item.value}</td> <td>${item.rationale}</td> </tr>`
				
				})
				let htmlS=`<table> <tbody> <tr> <th class="f18 font-m">Factors</th> <th class="f18 font-m">Value</th> <th class="f18 font-m">Rationale</th> </tr> ${ele}</tbody> </table>`
				ElMessageBox.alert(
				    htmlS,
				    {
				        dangerouslyUseHTMLString: true,
				        showConfirmButton:false,
				        customClass:'ipop notitle poptable'
				    }
				)
			})
        },
    },
    computed: {

    },
    mounted: function () {
        var that = this;
        that.initData();
        that.$nextTick(function () {
            if (localStorage.getItem("userinfo")) {
                that.token = JSON.parse(localStorage.getItem("userinfo")).token;
            };
            apiInfo({
                'id': that.$route.query.id,
                token: that.token,
            }).then((res) => {
                this.dataInfo=res.data
            })

        })
    }
}

</script>